<template>
  <view class='listSearch'>
    <view style='flex: 1'>
      <u-search v-model='searchValue'
                :shape='shape'
                :show-action='false'
                v-bind='$attrs'
                v-on="$listeners"
                @change='change'
                :placeholder='placeholder'></u-search>
    </view>
    <template v-if='filterShow'>
      <view>
        <u-line direction='col' margin='0 24rpx'></u-line>
      </view>
      <view class='filter' @click='handleFilter'>
        <view>筛选</view>
        <u-icon size='40' :name="FILTER"></u-icon>
      </view>
    </template>
  </view>
</template>

<script>
import FILTER from '../assets/filter.png'

export default {
  name: 'listSearch',
  props: {
    shape: {
      type: String,
      default: 'shape'
    },
    filterShow: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请输入搜索信息'
    },
    value: String
  },
  data() {
    return {
      FILTER,
      searchValue: ''
    };
  },
  methods: {
    handleFilter() {
      this.$emit('handleFilter');
    },
    // 事件冲突
    change(value) {
      this.$emit('inputChange', value);
    }
  }
};
</script>

<style scoped lang='scss'>
  .listSearch {
    height: 92rpx;
    padding: 16rpx 30rpx;
    background: #fff;
    display: flex;

    .filter{
      display: flex;
      justify-content: center;
      align-items: center;

      & > view:first-child {
        margin-right: 10rpx;
      }
    }
  }
</style>
